import CommentTitleView from "@/app/[language]/forum/components/CommentTitleView";
import useGetLatestComment from "@/app/[language]/query/useGetLatestComment";
import { useTranslations } from "next-intl";
import { ListGroup, ListGroupItemHeading } from "reactstrap";

export default function LatestCommentsView() {
  const t = useTranslations();

  const { data: latestComment, isFetched: isLatestCommentLoaded } =
    useGetLatestComment();

  return (
    <>
      <ListGroup>
        <ListGroupItemHeading>{t("latestCommentsView")}</ListGroupItemHeading>
        {isLatestCommentLoaded
          ? latestComment.map((latestComment) => {
              return (
                <CommentTitleView
                  key={latestComment.commentID}
                  forumID={latestComment.forumID}
                  essayID={latestComment.essayID}
                  comment={latestComment}
                />
              );
            })
          : [...Array(5).keys()].map((i) => (
              <CommentTitleView
                key={i}
                comment={{
                  commentID: 0,
                  date: "",
                  avatarID: "",
                  avatarName: "",
                  text: "Loading...",
                  forumID: "",
                  essayID: 0,
                }}
              />
            ))}
      </ListGroup>
    </>
  );
}